<template>
  <div class="login">
    <div class="max">
      <el-input v-model="username" placeholder="请输入用户名"></el-input>
      <el-input
        type="password"
        v-model="password"
        placeholder="请输入密码"
      ></el-input>
      <el-button type="primary" @click="login">登录</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    login() {
      // 请求接口数据
      this.$axios
        .post("/login", {
          username: this.username,
          password: this.password
        })
        .then(res => {
          console.log(res);
          let { msg } = res.data.meta;
          if (msg == "登录成功") {
            // 登录成功后将token存入sessionStorage;
            sessionStorage.setItem("token", res.data.data.token);
            this.$message({
              message: "登录成功",
              type: "success"
            });
            this.$router.push("/index");
          } else {
            if (this.username == "" || this.password == "") {
              this.$message({
                message: "请输入用户名或密码",
                type: "error"
              });
            } else {
              this.$message({
                message: "用户名或密码错误",
                type: "warning"
              });
            }
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  .max {
    width: 400px;
    height: 260px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 12px #ccc;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .el-button {
      width: 100%;
      height: 40px;
    }
  }
}
</style>